import { AppProps } from "next/app";
import { useEffect } from "react";

import Head from "next/head";
import usePrivateRoute from "@/hooks/usePrivateRoute";
import useRefreshToken from "@/hooks/useRefreshToken";
import usePageTitle from "../hooks/usePageTitle";
import { META_DATA } from "@/constant/config";
import "../styles/globals.scss";
import "../styles/markdown.scss";
import "../styles/prism.scss";

function App({ Component, pageProps }: AppProps) {
  usePrivateRoute();
  useRefreshToken();
  usePageTitle(Component);
  useEffect(() => {
    // if (process.env.NODE_ENV === "development") {
    //   const VConsole = require("vconsole");
    //   new VConsole();
    // }
    // const VConsole = require("vconsole");
    // new VConsole();
  }, []);
  return (
    <>
      <Head>
        <meta
          name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
        ></meta>
        <title>{META_DATA.title}</title>
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default App;
